<!--
 * @Author: liuyonghu
 * @Date: 2021-11-24 10:23:24
 * @LastEditTime: 2021-11-25 17:42:08
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/BI_Gaode/index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .map-container {
        width: 500px;
        height: 500px;
      }
    </style>
    <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=972927141b995455e57b0a8460eadfbe"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=972927141b995455e57b0a8460eadfbe"></script> -->
    <script src="https://webapi.amap.com/loader.js"></script>
  </head>
  <body>
    <div id="map" class="map-container"></div>
    <script>
      AMapLoader.load({
        key: '972927141b995455e57b0a8460eadfbe', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: '2.0.0', // Loca 版本，缺省 1.3.2
        },
      }).then((AMap) => {
        var SOC = 'CHN';
        var colors = {};
        var GDPSpeed = {
          520000: 10, //贵州
          540000: 10, //西藏
          530000: 8.5, //云南
          500000: 8.5, //重庆
          360000: 8.5, //江西
          340000: 8.0, //安徽
          510000: 7.5, //四川
          350000: 8.5, //福建
          430000: 8.0, //湖南
          420000: 7.5, //湖北
          410000: 7.5, //河南
          330000: 7.0, //浙江
          640000: 7.5, //宁夏
          650000: 7.0, //新疆
          440000: 7.0, //广东
          370000: 7.0, //山东
          450000: 7.3, //广西
          630000: 7.0, //青海
          320000: 7.0, //江苏
          140000: 6.5, //山西
          460000: 7, // 海南
          310000: 6.5, //上海
          110000: 6.5, // 北京
          130000: 6.5, // 河北
          230000: 6, // 黑龙江
          220000: 6, // 吉林
          210000: 6.5, //辽宁
          150000: 6.5, //内蒙古
          120000: 5, // 天津
          620000: 6, // 甘肃
          610000: 8.5, // 甘肃
          710000: 2.64, //台湾
          810000: 3.0, //香港
          820000: 4.7, //澳门
        };
        var getColorByDGP = function (adcode) {
          if (!colors[adcode]) {
            var gdp = GDPSpeed[adcode];
            if (!gdp) {
              colors[adcode] = 'rgb(227,227,227)';
            } else {
              var rg = 255 - Math.floor(((gdp - 5) / 5) * 255);
              colors[adcode] = 'rgb(' + rg + ',' + rg + ',255)';
            }
          }
          return colors[adcode];
        };

        var disCountry = new AMap.DistrictLayer.Country({
          zIndex: 10,
          SOC: 'CHN',
          depth: 2,
          styles: {
            'nation-stroke': '#22ffff',
            'coastline-stroke': [0.85, 0.63, 0.94, 1],
            'province-stroke': 'white',
            'city-stroke': 'rgba(255,255,255,0.15)', //中国特有字段
            fill: function (props) {
              //中国特有字段
              return getColorByDGP(props.adcode_pro);
            },
          },
        });

        var map = new AMap.Map('map', {
          mapStyle: 'amap://styles/grey',
          zoom: 3.9,
          center: [107.4976, 32.1697],
          viewMode: '3D',
          pitch: 12,
        //   dragEnable: false,
        //   zoomEnable: false,
          layers: [disCountry],
          //   mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
        });

        map.on('click', function (ev) {
          var px = ev.pixel;
          // 拾取所在位置的行政区
          var props = disCountry.getDistrictByContainerPos(px);

          console.log(props);
        });
        // 创建 Loca 实例
        var loca = new Loca.Container({
          map: map,
        });

        // 创建圆点图层
        var pointLayer = new Loca.PointLayer({
          zIndex: 10,
          opacity: 1,
          visible: true,
          blend: 'lighter',
        });

        // 创建数据源
        var dataSource = new Loca.GeoJSONSource({
          // url: 'xxx.geojson', 或者使用 data 字段
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'Point',
                  coordinates: [116.40014, 39.909736],
                },
              },
            ],
          },
        });

        // 图层添加数据
        pointLayer.setSource(dataSource);

        // 设置样式
        pointLayer.setStyle({
          radius: 30,
          color: 'red',
          borderWidth: 10,
          borderColor: '#fff',
          unit: 'px',
        });

        // // 添加到地图上
        // loca.add(pointLayer);

        // 呼吸点
        var scatter = new Loca.ScatterLayer({
          loca,
          zIndex: 10,
          opacity: 0.6,
          visible: true,
          zooms: [2, 22],
        });

        var pointGeo = new Loca.GeoJSONSource({
          url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
        });
        scatter.setSource(pointGeo);
        scatter.setStyle({
          unit: 'meter',
          size: [100000, 100000],
          borderWidth: 0,
          texture:
            'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
          duration: 2000,
          animate: true,
        });
        loca.add(scatter);

        // 弧线
        var pulseLink = new Loca.PulseLinkLayer({
          // loca,
          zIndex: 10,
          opacity: 1,
          visible: true,
          zooms: [2, 22],
          depth: true,
        });

        var geo = new Loca.GeoJSONSource({
          url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
        });

        pulseLink.setSource(geo);
        pulseLink.setStyle({
          unit: 'meter',
          dash: [40000, 0, 40000, 0],
          lineWidth: function () {
            return [20000, 1000];
          },
          height: function (index, feat) {
            return feat.distance / 3 + 10;
          },
          // altitude: 1000,
          smoothSteps: 30,
          speed: function (index, prop) {
            return 1000 + Math.random() * 200000;
          },
          flowLength: 100000,
          lineColors: function (index, feat) {
            return [
              'rgb(255,228,105)',
              'rgb(255,164,105)',
              'rgba(1, 34, 249,1)',
            ];
          },
          maxHeightScale: 0.3, // 弧顶位置比例
          headColor: 'rgba(255, 255, 0, 1)',
          trailColor: 'rgba(255, 255,0,0)',
        });
        loca.add(pulseLink);
        loca.animate.start();

        // 点击事件处理
        var clickInfo = new AMap.Marker({
          anchor: 'bottom-center',
          position: [116.396923, 39.918203, 0],
        });
        clickInfo.setMap(map);
        clickInfo.hide();
        map.on('click', function (e) {
          var feat = pulseLink.queryFeature(e.pixel.toArray());

          if (feat) {
            clickInfo.show();
            var props = feat.properties;
            clickInfo.setPosition(feat.coordinates[1]);
            clickInfo.setContent(
              '<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
                '速率: ' +
                feat.properties['ratio'] +
                '</div>'
            );
          } else {
            clickInfo.hide();
          }
        });

        var dat = new Loca.Dat();
        dat.addLayer(pulseLink);

        //实例化信息窗体
        var title =
            '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
          content = [];
        content.push(
          "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
        );
        content.push('电话：010-64733333');
        content.push(
          "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
        );
        var infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          content: createInfoWindow(title, content.join('<br/>')),
          offset: new AMap.Pixel(16, -45),
        });

        //构建自定义信息窗体
        function createInfoWindow(title, content) {
          var info = document.createElement('div');
          info.className = 'custom-info input-card content-window-card';

          //可以通过下面的方式修改自定义窗体的宽高
          info.style.width = '400px';
          // 定义顶部标题
          var top = document.createElement('div');
          var titleD = document.createElement('div');
          var closeX = document.createElement('img');
          top.className = 'info-top';
          titleD.innerHTML = title;
          closeX.src = 'https://webapi.amap.com/images/close2.gif';
          //   closeX.onclick = closeInfoWindow;

          top.appendChild(titleD);

          info.appendChild(top);

          // 定义中部内容
          var middle = document.createElement('div');
          middle.className = 'info-middle';
          middle.id = 'subMap';
          middle.style.backgroundColor = 'white';
          middle.innerHTML = content;
          info.appendChild(middle);

          // 定义底部内容
          var bottom = document.createElement('div');
          bottom.className = 'info-bottom';
          bottom.style.position = 'relative';
          bottom.style.top = '0px';
          bottom.style.margin = '0 auto';
          var sharp = document.createElement('img');
          sharp.src = 'https://webapi.amap.com/images/sharp.png';
          bottom.appendChild(sharp);
          info.appendChild(bottom);
          return info;
        }

        infoWindow.open(map, [116.481181, 19.989792]);

         new AMap.Map('subMap', {
          mapStyle: 'amap://styles/grey',
          zoom: 4,
          center: [107.4976, 32.1697],
          viewMode: '3D',
          pitch: 12,
        //   dragEnable: false,
        //   zoomEnable: false,
          //   mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
        });
      });
    </script>
  </body>
</html>
